<template>
  <div class="Pager-container" v-if="totalPage>1">
    <a href="" @click="handelChange($event,1)" :class="{disabled:current===1}">|&lt;&lt;</a>
    <a href=""  @click="handelChange($event,current-1)" :class="{disabled:current===1}">|&lt;&lt;</a>
    <a href=""  @click="handelChange($event,n)" v-for="(n,i) in numbers" :class="{active:current===n}" :key="i">{{ n }}</a>
    <a href=""  @click="handelChange($event,current+1)" :class="{disabled:current===totalPage}">&gt;&gt;</a>
    <a href=""  @click="handelChange($event,totalPage)" :class="{disabled:current===totalPage}">&gt;&gt;|</a>
  </div>
</template>

<script>

export default {
    props:{
        //当前页数
        current:{
            type:Number,
            default:1,
        },
        //总数
        total:{
            type:Number,
            default:0,
        },
        //每一页中的最大数量
        limit:{
            type:Number,
            default:10,
        },
        //导航最大显示
        visiblenumber:{
            type:Number,
            default:10,
        }
    },
    computed:{
        totalPage(){
            return Math.ceil(this.total/this.limit);
        },
        theMin(){
            let min=this.current-Math.floor(this.visiblenumber/2);
            if(min<=1)
            min=1;
            return min;
        },
        theMax(){
            let max=this.theMin+this.visiblenumber-1;
            if(max>=this.totalPage)
            max=this.totalPage;
            return max;
        },
        numbers(){
            let data=[];
            for(let i=this.theMin;i<=this.theMax;i++){
                data.push(i);
            }
            return data;
        },
    },
    methods:{
        handelChange(e,newpager){
            e.preventDefault();
            if(newpager>this.totalPage)
            newpager = this.totalPage;
            if(newpager<1)
            newpager=1;
            if(newpager===this.current)
            return;
            this.$emit('pagechange',newpager);
            console.log(`跳转到第${newpager}页`);
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@/style/var.less';
.Pager-container{
    display: flex;
    justify-content: center;
    margin: 20px 0;
    a{
        margin: 0 6px;
        color: @primary;
        &.disabled{
            color:@lightWords;
            cursor: not-allowed;
        }
        &.active{
            color:@dark;
            font-size: bold;
            cursor: text;
        }
    }
}
</style>